<template>
  <div class="pass">
    <!-- 车辆登记管理 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人员登记</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
       <div class="sousuo">
        <div class="search">
          <!--两个按钮 -->
          <el-button type="info" @click="getCarAdd">人员登记</el-button>
          <el-button type="info" @click="dorefresh">刷新</el-button>
        </div>
        <div class="search">
          <!-- 一个输入框，两个按钮 -->
          <el-input v-model="searchById" placeholder="请输入用户ID" />
          <el-button type="primary" @click="getPersonById">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
      </div>

      <!-- 表格 -->
      <el-table :data="personList">
        <el-table-column prop="id" label="用户ID"></el-table-column>
        <el-table-column prop="uname" label="姓名"></el-table-column>
        <el-table-column prop="idCard" label="身份证号"></el-table-column>
        <!-- 快速复制某行 alt+shift+剪头 -->
        <el-table-column prop="outtem" label="体温"></el-table-column>
        <el-table-column prop="intime" label="进入时间">
        </el-table-column>
        <el-table-column prop="phone" label="电话号码"></el-table-column>
        <el-table-column prop="outtime" label="出去时间"></el-table-column>
        <el-table-column prop="note" label="备注"></el-table-column>


        <el-table-column label="操作" width="200px">
          <template v-slot="scope">
            <div v-if="scope.row.status == 0">
              <el-button type="primary" @click="changeStatus(scope.row.id, 1)">详情</el-button>
              <el-button color="red" @click="deletePass(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="paging" background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// getAllPassAPi获取所有通行证 发请求
import { ElMessage } from "element-plus";
import { union } from "lodash";
import {
  getAllPassAPi,
  deletePassApi,
  changePassStatusApi,
  getUserPassApi,
} from "../api/index.js";
import {
  getAllPersonApi,
  postUpdatePersonApi,
  getPersonByIdApi
} from "../api/index1.js";
export default {
  inject: ["refresh"],
  data() {
    return {
      passList: [],
      searchById: '',
      personList: [],
      formInline: {
         
           outtem:'',
            baseid:'',
            uname:'',
            outtime:'',
            intime:'',
            note:'',
            idCard:'',
            phone:''
        }
    };
  },
  methods: {
    //1.获取人员信息
    getPersonList() {
      getAllPersonApi().then((res) => {
        console.log(res.data)
        this.personList=res.data
      });
    },
    //
    // refresh(){
    //   this.getPersonList()
      // let obj={
      //     // uname:this.formInline.uname,
      //     // phone:this.formInline.phone,
      //     // baseid:this.formInline.baseid,
      //     // outtem:this.formInline.outtem,
      //     // intime:this.formInline.intime,
      //     // idCard:this.formInline.idCard,
      //     // note:this.formInline.note,
      //     // outtime:this.formInline.outtime,
      // }
      //  postUpdatePersonApi(obj).then(({data:res})=>{
      //   if (res.code == 20000) {
      //     this.getPersonList();
      //     ElMessage({
      //       message: "更新成功",
      //       type: "success",
      //     });
      //   }
      //  }).catch(() => {})
    // },
    
    // 3.改变通行证状态
    changeStatus(id, status) {
      console.log(id + status);

      let obj = {
        id: id,
        status: status,
      };
      changePassStatusApi(obj).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.getPassList();
          ElMessage({
            message: "更新成功",
            type: "success",
          });
        }
      });
    },
    // //接收用户填写的id数据
    // earchById(){

    // },
    // //根据id搜索用户
    // getCarListByUserId(){

    // },
    // // 2.根据id删除车辆
    // deletePass(id) {
    //   getDeleteCarApi(id).then((res) => {
    //     console.log(res);
    //     // 1.刷新数据
    //     this.getCarRegisterList();
    //     // 2.提示用户删除成功
    //     if (res.code == 20000) {
    //       ElMessage({
    //         message: "删除成功",
    //         type: "success",
    //       });
    //     }
    //   });
    // },
    // // 3.改变通行证状态
    // changeStatus(id) {
    //   console.log(id );

    //   let obj = {
    //     id: id,
    //   };
    //   getUpdateCarApi(obj).then((res) => {
    //     console.log(res);
    //     if (res.code == 20000) {
    //       this.getCarRegisterList();
    //       ElMessage({
    //         message: "更新成功",
    //         type: "success",
    //       });
    //     }
    //   });
    // },
    // //4.新增人员
    getCarAdd() {
      this.$router.push({
        path: "../views/userAdd2"//要跳转的页面的路由
      });
    },
        // 5.搜索
    getPersonById() {
      getPersonByIdApi(this.searchById)
        .then((res) => {
          console.log(res);
          if (res.code == 20000) {
            this.personList = res.data;
          }
        })
    },
    // 6.重置
    reset() {
      this.searchById = "";
      this.getPersonList();
    },
    // 7.刷新
    dorefresh() {
      this.refresh()
    },
  },
  created() {
    this.getPersonList();

  },
};
</script>

<style lang="less" scoped>
.pass {
  .el-breadcrumb {
    margin-bottom: 30px;
  }
}

.search {
  width: 300px;
  display: flex;

  .el-input {
    margin-right: 30px;
  }
}

.sousuo {
  display: flex;
  justify-content: space-between;
}

.paging {
  display: flex;
  justify-content: right;
}
</style>